<template>
  <el-container>
    <el-header style="background-color: white;color: black;">
      <h1 align="center">商品列表</h1>
    </el-header>
    <el-main>
      <!-- 查询条件表单-->
      <el-form :inline="true" :model="queryPage" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="queryPage.goodsName" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="queryPage.goodsType" placeholder="类型">
            <el-option label="--请选择商品类型--" value=""></el-option>
            <template v-for="x in goodsTypes">
            <el-option :label="x" :value="x"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData()">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格组件-->
      <!-- :data: 当前页集合-->
      <el-table :data="goodsList" style="100%">
        <!-- 列组件-->

        <el-table-column prop="goodsId" label="编号" width="80"></el-table-column>
        <el-table-column prop="goodsName" label="商品" width="400"></el-table-column>
        <el-table-column prop="goodsType" label="类型" width="200"></el-table-column>
        <el-table-column prop="goodsPrice" label="价格" width="200"></el-table-column>
        <el-table-column prop="goodsNums" label="余量" width="200"></el-table-column>

        <el-table-column label="操作" width="130">
          <!-- slot-scope 插槽 用来获取循环的迭代变量-->
          <template slot-scope="scope">
            <el-button size="medium" @click="change(scope.row, scope.$index)" round>修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件-->
      <el-pagination @size-change="select" @current-change="selectPage" :current-page="queryPage.page"
        :page-sizes="[6,8,10,12,14,16]" :page-size="queryPage.row" :total="total"
        layout="sizes,prev,pager,next,jumper,total">
      </el-pagination>

      <!-- 对话框组件-->
      <el-dialog :title="title" :visible.sync="isShow" width="30%">
        <el-form label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="goodsData.goodsName" ></el-input>
          </el-form-item>
          <el-form-item label="商品类型">
            <el-select v-model="goodsData.goodsType">
              <template v-for="x in goodsTypes">
              <el-option :label="x" :value="x"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="商品单价">
            <el-input v-model="goodsData.goodsPrice" ></el-input>
          </el-form-item>
          <el-form-item label="商品余量">
            <el-input v-model="goodsData.goodsNums"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="close">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>

</template>

<script>
  export default {
    name: "goodsList",
    data() {
      return {
        goodsList: [],
        goodsTypes:[],
        //总页数
        totalPage: 0,
        //总条数
        total: 0,
        //对话框title
        title: "信息修改",
        isShow: false, //对话框显示
        queryPage: {
          page: 1,
          row: 6,
          goodsName: "",
          goodsType: ""
        },

        goodsData: {
          //商品ID
          goodsId: 0,
          //商品名称
          goodsName: "",
          //商品类型
          goodsType: "",
          //商品价格
          goodsPrice: 0,
          //剩余数量
          goodsNums: 0,
        },
      }
    },
    methods: {
      loadData() {
        var self = this;
        var http = this.$http.get("/user/list", {
          params: this.queryPage
        });
        http.then(function(rs) {
          if (rs.data.success) {
            self.goodsList = rs.data.data.goodsList;
            self.totalPage = rs.data.data.totalPage;
            self.total = rs.data.data.total;
            console.log(rs.data.data.goodsTypes);
            self.goodsTypes = rs.data.data.goodsTypes;
          } else {
            self.goodsList = [];
            self.total = 0;
          }
        });
      },
      select(row) {
        this.queryPage.row = row;
        this.loadData();
      },
      selectPage(page) {
        this.queryPage.page = page;
        this.loadData();
      },
      //修改按钮弹出对话框
      change(x, index) {
        this.isShow = true;
        this.goodsData = JSON.parse(JSON.stringify(x));
        //this.goodsData = x;
      },

      //修改提交
      onSubmit() {
        var self = this;
        var http = this.$http.get("/user/change", {
          params:this.goodsData
        });
        http.then(function(rs){
          if(rs.data.success){
            self.$message(rs.data.info);
            self.isShow = false;
            location.reload();
          }
        });

      },
      //取消
      close() {
        this.isShow = false;
      }
    },
    mounted() {
      this.loadData();
    },
  }
</script>

<style>

</style>
